<template>
	<view class="collect-container">
		<view class="banner">
			<image src="/fireGridCheck/static/bg.png" mode=""></image>
		</view>
		<view class="search">
			<view class="icon">
				<image src="/fireGridCheck/static/icon/search.png" mode=""></image>
			</view>
			<input v-model="searchText" placeholder-class="phcolor" type="text" @confirm="handleSearch" confirm-type="search" class="search-input"
			 placeholder="请输入检查点名称">
			<!-- <view  @click="resetSearch" class="clear-icon">x</view> -->
		</view>
		<view class="s-type">
			<dean-popover direction="right" modalLeftPos="6rpx" @select="selectType" :btnList="typeList" isWhite chooseText="筛选" :isShowIcon="false"></dean-popover>
		</view>
		<view class="xinjian">
			<view class="top-icon">
				<image src="/fireGridCheck/static/c.png"></image>
			</view>
			<!-- <span class="new">新建</span> -->
			<dean-popover modalLeftPos="-110rpx" @select="selectChange" :btnList="btnList" isWhite chooseText="新建" :isShowIcon="false"></dean-popover>
		</view>
		<view class="create">
			<info-item v-if="checkPointList" :infoList="checkPointList"></info-item>
			<view v-else>
				<van-empty description="暂无检查点" />
			</view>
			<uni-load-more v-if="checkPointList && checkPointList.length >= 10" :status="status" />
		</view>
	</view>
</template>

<script>
	import DeanPopover from '@/fireGridCheck/components/dean-popover/dean-popover.vue'
	import InfoItem from '@/fireGridCheck/components/infoItem.vue'
	export default {
		components: {
			InfoItem,
			DeanPopover
		},
		data() {
			return {
				status: 'more',
				params: {
					所属网格id: null,
					检查点名称: null,
					检查点类型: null,
					checkPointTypes: ['restaurant', 'watercourse'],
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				searchText: '',
				checkPointList: [],
				typeList: this.$type.typeList,
				list: ['','company','residential','restaurant','clinic','shop','publicarea','room'],
				btnList: ['新建检查点','新增设施']
			}
		},
		onLoad() {
			this.params.所属网格id = uni.getStorageSync('gridInfo').所属网格id
			this.getCheckPointList()
		},
		watch: {
			searchText() {
				if(this.searchText === ''){
					this.params.检查点名称 = null
					this.status = 'more'
					this.params.pagination.current = 1
					this.getCheckPointList()
				}
			}
		},
		onReachBottom() {
			// console.log('触发上拉')
			if(this.status !== 'noMore' && this.checkPointList) {
				this.status = 'loading'
				this.getMoreCheckPointList()
			}
		},
		methods: {
			resetSearch() {
				this.searchText = ''
			},
			getMoreCheckPointList() {
				this.params.pagination.current++
				this.$http.post('gridSystem/checkPoint/list', this.params).then(res => {
					console.log(res)
					if(res.code === 10000){
						this.checkPointList = this.checkPointList && this.checkPointList.concat(res.data.list)
						if(this.checkPointList.length === res.data.total){
							this.status = 'noMore'
						}
					}
				})
			},
			getCheckPointList() {
				this.params.pagination.current = 1
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/checkPoint/list', this.params).then(res => {
					console.log(res)
					if(res.code === 10000){
						this.checkPointList = res.data.list
						if(this.checkPointList && this.checkPointList.length === res.data.total){
							this.status = 'noMore'
						}
					}
				})
			},
			handleSearch() {
				// console.log('123')
				this.params.检查点名称 = this.searchText
				this.getCheckPointList()
			},
			selectType(val) {
				this.params.检查点类型 = this.list[val]
				this.getCheckPointList()
			},
			selectChange(val) {
				// console.log(val)
				if(val === 0){
					uni.navigateTo({
						url: '/fireGridCheck/createMessage/createMessage?url=/fireGridCheck/collectMessage/collectMessage'
					})
				}else {
					uni.navigateTo({
						url: '/fireGridCheck/addInstallation/addInstallation'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.van-empty {
		height: 1022rpx;
		background-color: #fff;
	}
	.phcolor {
		color: #fff;
	}
	.collect-container {
		background-color: #F5F5F5;
		min-height: 100vh;
		// height: 100vh;
		.create {
			width: 710rpx;
			// height: 100rpx;
			border-radius: 8rpx;
			margin-left: 20rpx;
			// background-color: #fff;
			position: relative;
			top: -40rpx;
			// padding-top: 20rpx;
		}
		.s-type {
			position: absolute;
			top: 10rpx;
			left: 20rpx;
		}
	}
	.banner {
		width: 750rpx;
		height: 220rpx;
		// margin-top: -2rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.search {
		position: absolute;
		display: flex;
		top: 4rpx;
		left: 100rpx;
		width: 468rpx;
		height: 48rpx;
		border: 2rpx solid #fff;
		border-radius: 20rpx;
		padding-left: 17rpx;
		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-top: 6rpx;
			margin-right: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.search-input {
			font-size: 30rpx;
			color: #fff;
		}
	}
	.xinjian {
		position: absolute;
		top: 10rpx;
		right: 20rpx;
		display: flex;
		align-items: center;
		.top-icon {
			width: 41rpx;
			height: 41rpx;
			margin-right: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.new {
			color: #fff;
			margin-left: 10rpx;
		}
	}
</style>
